<!--
 * @Author: xiaxia
 * @Description: 
 * @Date: 2024-07-01 14:04:39
 * @LastEditTime: 2024-07-02 15:22:53
 * @FilePath: \project\src\views\product\spu\skuForm.vue
-->
<!--
 * @Author: xiaxia
 * @Description: 
 * @Date: 2024-07-01 14:04:39
 * @LastEditTime: 2024-07-02 14:07:17
 * @FilePath: \project\src\views\product\spu\skuForm.vue
-->
<template>
  <div>
    <el-form :model="skuForm" label-width="70px">
      <el-form-item label="sku名称">
        <el-input v-model="skuForm.skuName" placeholder="SKU名称" clearable />
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input v-model="skuForm.price" placeholder="价格(元)"  type="number" />
      </el-form-item>
      <el-form-item label="重量(克)">
        <el-input v-model="skuForm.weight" placeholder="重量(克)"  type="number" />
      </el-form-item>
      <el-form-item label="sku描述">
        <el-input v-model="skuForm.skuDesc" placeholder="请输入sku描述" type="textarea" />
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form inline>
          <el-form-item v-for="it in attrDataList" :key="it.id" :label="it.attrName" style="margin-bottom: 10px;">
            <el-select v-model="it.attrIdAndvalueId" placeholder="请选择" style="width: 220px;">
              <el-option
                v-for="item in it.attrValueList"
                :key="item.id"
                :label="item.valueName"
                :value="`${it.id}:${item.id}`"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form inline >
          <el-form-item v-for="it in SkuSaleAttr" :key="it.id" :label="it.saleAttrName">
            <el-select v-model="it.saleIdAndvalueId" placeholder="请选择" style="width: 220px;">
              <el-option
                v-for="item in it.spuSaleAttrValueList"
                :key="item.id"
                :label="item.saleAttrValueName"
                :value="`${it.id}:${item.id}`"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片名称">
        <el-table ref="tableRef":data="SkuImageList" border>
          <el-table-column width="55" type="selection" align="center" />
          <el-table-column prop="url" label="图片">
            <template #="{row}">
              <img :src="row.url" alt="" style="width: 100px;height: 100px">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" />
          <el-table-column label="操作" width="100">
            <template #="{row, $index}">
              <el-button size="small" @click="hInitImg(row)">设置默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="hSaveSku">保存</el-button>
        <el-button @click="cancle">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reqSpuImage, reqSpuSaleAttr, reqSaveSkuInfo } from '@/api/product/spu';
import {  SkuInfo, SpuImages, SpuSaleAttrResponse, SpuValue } from '@/api/product/spu/type';
import {reqAttrList} from '@/api/product/attr'
import { ref, defineEmits, defineExpose, reactive } from 'vue';
import { AttrListResponse } from '@/api/product/attr/type';
import { ElMessage } from 'element-plus';
let $emit = defineEmits()

let skuForm = reactive<SkuInfo>({
  spuId: '', // spuid
  tmId: '', // 品牌id
  category3Id: '', // 三级分类id
  
  skuName: '',
  price: '',
  weight: '',
  skuDesc: '',
  isSale: false,
  skuDefaultImg: '',
  skuAttrValueList: [],
  skuSaleAttrValueList: []
}) // sku数据
let attrDataList = ref<any>([]) // 平台属性
let SkuImageList = ref<any>([]) // 图片
let SkuSaleAttr = ref<any>([]) // 销售属性
let tableRef = ref() // 获取table组件实例

// 编辑 - 获取所有的spu详细数据
const initSkuData = async (category1Id:number,category2Id:number,row:any)=>{
  // 收集数据
  skuForm.category3Id = row.category3Id
  skuForm.spuId = row.id
  skuForm.tmId = row.tmId
  // 获取平台属性
  const res1:AttrListResponse = await reqAttrList(category1Id, category2Id, row.category3Id)
  if(res1.code != 200) return
  attrDataList.value = res1.data

  // 获取当前的 spu图片
  const res3:SpuImages = await reqSpuImage((row.id as number))
  SkuImageList.value = res3.data.map(item => {
    return{
      name:item.imgName,
      url:item.imgUrl,
    }
  })
  // 获取当前的 spu销售属性
  const res4:SpuSaleAttrResponse = await reqSpuSaleAttr((row.id as number))
  SkuSaleAttr.value = res4.data
}

// 设置 默认图片
const hInitImg = (row:any) => {
  tableRef.value.clearSelection()
  tableRef.value.toggleRowSelection(row,true)
  skuForm.skuDefaultImg =  row.url
}

// 保存
const hSaveSku = async () =>{
  // 平台属性 - 整理
  skuForm.skuAttrValueList = attrDataList.value.reduce((prev:any, next:any)=>{
    if(next.attrIdAndvalueId) {
      let [attrId, valueId] = next.attrIdAndvalueId.split(':')
      prev.push({attrId, valueId})
    }
    return prev
  }, [])
  // 销售属性 - 整理
  skuForm.skuSaleAttrValueList = SkuSaleAttr.value.reduce((prev:any, next:any)=>{
    if(next.saleIdAndvalueId) {
      let [saleAttrId, saleAttrValueId] = next.saleIdAndvalueId.split(':')
      prev.push({saleAttrId, saleAttrValueId})
    }
    return prev
  }, [])

  const res:any = await reqSaveSkuInfo(skuForm)
  if(res.code!=200) return ElMessage({type: 'error',message: '添加失败'})
  ElMessage({type: 'success',message: '添加成功'})
  $emit('changeIsTable', {val1:0, val2:''})
}

const cancle = ()=>{
  $emit('changeIsTable', {val1:0, val2:''})
}

defineExpose({initSkuData}) 
</script>

<style lang="scss" scoped>

</style>